<template>
  <Box :title="detailTitle" class="service-area-detail" direction="row" >
    <!-- 摄像机  市界显示,省界隐藏 -->
    <Panel class="camera" second :title="aroundSxj.name" align="center">
      <VideoPlayer :url="aroundSxj.url"></VideoPlayer>
    </Panel>

    <!-- 流量统计 -->
    <Panel class="line-chart" second>
      <LineChart :seriesData="seriesData" :title="title" :typeArr="typeArr" :xDate="xDate" />
    </Panel>

    <a-spin class="spin-loading" v-show="spinning" />
  </Box>
</template>

<script>
export default {
  name: 'ServiceAreaDetail'
}
</script>
<script setup>
/**
 * @desc 服务区详情(三级)
 * @auther 阳坤
 * @date 2022/10/27
 *
 **/

import Box from '../../components/detail/Box.vue'
import LineChart from '../../components/charts/ShadowLine.vue'
import Switch from '../../components/detail/Switch.vue'
import serviceAreaApi from '../../api/service-area.js'
import useMapOperates from '@/hooks/useMapOperates'
import { ref, onMounted, watch, defineProps, getCurrentInstance, onBeforeUnmount } from 'vue'
import { message } from 'ant-design-vue'
import dayjs from 'dayjs'
import Panel from '../../components/panel'
import VideoPlayer from '@/components/video-player/VideoPlayer.vue'
import baseServiceApi from '../../api/base-service'
import { useStore } from 'vuex'
import useComputedDistanceRow from '@/hooks/useComputedDistanceRow'

const props = defineProps({
  // 数据项
  data: {
    type: Object,
    default: () => {}
  }
})
const store = useStore()
const { proxy } = getCurrentInstance()
// 点位、弹框的处理
const handleDark = useMapOperates()
// 详情标题
const detailTitle = ref('')
// loading
const spinning = ref(false)
// echarts 标题名称、分类、x轴数据、折线数据
const title = ref('24小时变化趋势')
const typeArr = [
  { name: '断面流量', icon: 'rect' },
  { name: '入区流量', icon: 'rect' },
  { name: '入区率' },
  { name: '车位饱和度' }
]
const xDate = ref([])
const seriesData = ref([
  {
    name: '断面流量',
    color: '#266BF4',
    showLabel: true,
    data: [],
    type: 'bar'
  },
  {
    name: '入区流量',
    color: '#13bce6',
    showLabel: true,
    data: [],
    type: 'bar'
  },
  {
    name: '入区率',
    gradientColor: [
      { offset: 0, color: 'rgb(230, 221, 200)' },
      { offset: 1, color: 'rgb(223, 234, 236)' }
    ],
    color: '#34C784',
    type: 'line',
    data: []
  },
  {
    name: '车位饱和度',
    gradientColor: [
      { offset: 0, color: 'rgb(202, 225, 208)' },
      { offset: 1, color: 'rgb(223, 234, 236)' }
    ],
    color: '#DFA432',
    type: 'line',
    data: []
  }
])
// 摄像机数据
const aroundSxj = ref({})

onMounted(() => {
  init()
})

/**
 * 初始化
 */
const init = () => {
  getData()
}

/**
 * 获取数据
 */
const getData = () => {
  spinning.value = true
  aroundSxj.value = {}
  drawLayer()
  detailTitle.value = props.data.serviceName
  const serviceAreaId = props.data.serviceId
  // serviceAreaApi
  //   .getServiceAreaDetails(serviceAreaId)
  //   .then(res => {
  //     if (res.data) {
  //       // 时间轴
  xDate.value = (props.data.hour || []).map(item => dayjs(item).format('HH:MM'))
  //       // 折线数据
  //       seriesData.value[0].data = res.data.flowList
  //       seriesData.value[1].data = res.data.intoFlowList
  //       seriesData.value[2].data = res.data.areaRatioList
  seriesData.value[3].data = props.data.carSaturation
  //     }
  //   })
  //   .catch(() => {
  //     message.error(`数据获取失败！`)
  //   })
  //   .finally(() => {
  spinning.value = false
  //   })
  // 获取摄像机

  if (props.data.latitude && props.data.longitude) getMarkerSxj(props.data)
}

/**
 * 地图图层操作
 */
const drawLayer = () => {
  const path = [props.data.longitude, props.data.latitude]
  handleDark('marker', [
    {
      icon: 'icon-gs-fwq',
      path: path,
      name: props.data.serviceName,
      size: [30, 35],
      offset: [-15, -35]
    }
  ])
  proxy.$mapSdk().setMvMapCenterAndZoom(path, 13)
}

/**
 * 监听id变化
 */
watch(
  () => props.data.eventId,
  (newVal, oldVal) => {
    getData()
  },
  { deep: true }
)
/**
 * 点位附近摄像机
 * **/
function getMarkerSxj(item) {
  // const _path = path // || [[120.62173935320476, 31.348696499246007]]
  const path = [item.longitude, item.latitude]
  const params = {
    lon: path[0],
    lat: path[1],
    resourceType: 6
  }
  baseServiceApi.getLonlatInfoList(params).then(res => {
    const sxtList = useComputedDistanceRow(
      path,
      (res.data || [])
        .filter(i => i.roadSysType == store.state.config.roadType)
        .slice(0, 1)
        .map(i => {
          return {
            ...i,
            name: i.resourcesName,
            icon: 'zhdd-gs-sxj-active'
          }
        })
    )
    handleDark('marker', sxtList)
    const promiseList = sxtList.map(i => {
      return baseServiceApi.getCameraUrl({
        roadType: store.state.config.roadType,
        cameraId: i.resourcesId,
        videoType: 1
      })
    })
    Promise.all(promiseList)
      .then(res => {
        res.forEach((i, index) => {
          if (i.detail) {
            sxtList[index].url = i.detail
          }
        })
      })
      .finally(() => {
        sxtList.length && (aroundSxj.value = sxtList[0])
      })
  })
}
</script>

<style scoped lang="less">
@import url(../../styles/themes/index.less);
.service-area-detail {
  .camera {
    width: 30%;
  }

  .line-chart {
    flex: 1;
  }
}
</style>
